<script setup>
import { ref, onMounted } from 'vue'
// import { reqHospitalDetail, reqHospitalDeparment } from '@/api/hospitalsInfo'
import { useRouter } from 'vue-router'
const router = useRouter()

// const hospitalMsg = ref({})
// const DepartmentMsg = ref({})
// onMounted(async () => {
//     const res = await reqHospitalDetail(router.currentRoute.value.query.hoscode)
//     // console.log(res)
//     hospitalMsg.value = res.data
//     const res2 = await reqHospitalDeparment(router.currentRoute.value.query.hoscode)
//     console.log(res2.data)
//     DepartmentMsg.value = res2.data
// })
// 将上述数据存到store中，避免重复请求
import { useHosMsgStore } from '@/stores/hospitalMsg'
import { storeToRefs } from 'pinia';
const HosMsgStore = useHosMsgStore()
const { hospitalMsg, DepartmentMsg } = storeToRefs(HosMsgStore)
</script>

<template>
    <div class="page-content" v-if="hospitalMsg?.hospital !== undefined">
        <h3>{{ hospitalMsg.hospital.hosname }} <em>👍{{ hospitalMsg.hospital.param.hostypeString }}</em></h3>
        <div class="rules">
            <img :src="`data:image/jpeg;base64,` + hospitalMsg.hospital.logoData" alt="">
            <div class="hospital-info">
                <h6>挂号规则</h6>
                <p>预约周期：{{ hospitalMsg.bookingRule.cycle }}天 放号时间：{{ hospitalMsg.bookingRule.releaseTime }}
                    停止挂号时间：{{ hospitalMsg.bookingRule.stopTime }}</p>
                <p>具体位置：{{ hospitalMsg.hospital.param.fullAddress }}</p>
                <p>具体路线：{{ hospitalMsg.hospital.route }}</p>
                <p>退号时间：就诊前一工作日{{ hospitalMsg.bookingRule.quitTime }}前取消</p>
                <h6>预约挂号规则</h6>
                <p v-for='(item, index) in hospitalMsg.bookingRule.rule ' :key='index'>{{ item }}</p>
            </div>
        </div>
        <div class="departments_show">
            <ul>
                <li v-for="item in DepartmentMsg" :key="item.depcode"><a :href="'#' + item.depcode">{{ item.depname
                        }}</a></li>
            </ul>
            <div class="department_content">
                <div class="for-box1" v-for="item in DepartmentMsg" :key="'con' + item.depcode"
                    style="margin-top: 50px;">
                    <p :id="item.depcode"
                        style="position: relative;top: -100px;display: block;height: 0;overflow: hidden;"></p>
                    <h5>{{ item.depname }}</h5>
                    <div class="span-box">
                        <span v-for="Department in item.children"
                            @click="router.push({ path: '/hospital/register_step1', query: { hoscode: router.currentRoute.value.query.hoscode, depcode: Department.depcode } })">{{
        Department.depname }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <el-empty description="无数据" />
    </div>
</template>

<style scoped>
.page-content {
    h3 {
        font-size: 1.5rem;
        font-weight: 600;

        em {
            font-weight: normal;
            font-size: 16px;
            color: var(--gray-color2);
        }
    }

    .rules {
        margin: 40px 0;
        display: flex;
        justify-content: start;

        img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-right: 20px;
        }

        .hospital-info {
            flex: 1;

            p {
                color: var(--gray-color2);
            }

            p,
            h6 {
                margin-top: 10px;
            }
        }
    }

    .departments_show {
        display: flex;

        ul {
            width: 90px;
            margin-right: 20px;

            li {
                padding: 10px 0;
                text-align: center;
                background-color: var(--gray-color3);
                border-left: 1px solid var(--gray-color3);
                transition: all 0.3s linear;

                &:active {
                    background-color: white;
                    border-left: 1px solid var(--theme-color);

                }

                a:hover,
                .activeA {
                    color: var(--theme-color);

                }
            }
        }

        .department_content {
            flex: 1;
            height: 400px;
            overflow: auto;

            .for-box1:nth-child(1) {
                margin-top: 0 !important;
            }

            h5 {
                background-color: var(--gray-color3);
            }

            .span-box {
                display: flex;
                flex-wrap: wrap;

                span {
                    width: 33%;
                    margin-top: 10px;
                    color: var(--gray-color2);
                }
            }
        }
    }
}
</style>